import React, { useState } from "react";
import { Form, Input, Button, Checkbox, Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './index.less'

const chatindex: React.FC = () => {

    const [form] = Form.useForm();
    const [isSpin, setIsSpin] = useState(false);
    const onFinish = (values: any) => {
        // console.log('Received values of form: ', values);
        setIsSpin(true);
        window.localStorage.setItem('user', JSON.stringify(values));
        setTimeout(() => {
            setIsSpin(false);
            history.push('/Chatindex');
        }, 2000);

    }

    return (
        <Spin tip='请稍后...' spinning={isSpin}>
            <div className="chatindex">
                <Form
                    form={form}
                    name="normal_login"
                    className={styles.login_form}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        label="昵称"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="id"
                        label="编号"
                        rules={[{ required: true, message: '您的id' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="number"
                            placeholder="id"
                        />
                    </Form.Item>
                    <Form.Item
                        name="receive_id"
                        label="对方"
                        rules={[{ required: true, message: '对方的id' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="number"
                            placeholder="好友id"
                        />
                    </Form.Item>
                    <Form.Item
                        name="pic"
                        label="头像"
                        rules={[{ required: true, message: '您的头像地址' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="您的头像地址"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <a className={styles.login_form_forgot} href="">
                            Forgot password
                        </a>
                    </Form.Item>


                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={styles.login_form_button}>
                            开始
                        </Button>

                    </Form.Item>
                </Form>
            </div>
        </Spin>
    )
}
export default chatindex;